<script lang="ts" setup>
    import { ref } from "vue";
    import YunWordleLetter from "./YunWordleLetter.vue";
    import { useGuessingList } from "@/modules/pinia";

    type State = "empty" | "exclude" | "include" | "correct";

    const wordle_showout_list = ref();

    (() => {
        const guessingStore = useGuessingList();
        wordle_showout_list.value = guessingStore.list;
    })();
</script>

<template>
    <div>
        <h2>History</h2>
        <div
            v-for="order in [0, 1, 2, 3, 4, 5, 6, 7]"
            :key="order"
            class="wordle-line">
            <YunWordleLetter
                v-for="lOrder in [0, 1, 2, 3, 4]"
                :letter="wordle_showout_list[order][lOrder][`letter`]"
                :state="wordle_showout_list[order][lOrder][`state`]" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
    div.wordle-line {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 4px;
    }
</style>
